<template>
	<view class="content">
		<!-- 设置圆形围栏 -->
		<map
			id="googleMap"
			:latitude="latitude"
			:longitude="longitude"
			:scale="scale"
			:markers="markers"
			:circles="circles"
			@markertap="onMarkerTap"
		></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 37.7749, // 初始纬度
				longitude: -122.4194, // 初始经度
				scale: 13, // 地图缩放级别
				markers: [],
				circles: []
			}
		},
		onLoad() {

		},
		onReady() {
			this.initFence();
		},
		methods: {
		 initFence() {
				// 电子围栏中心位置
				const center = {
					latitude: 37.7749,
					longitude: -122.4194
				};

				// 电子围栏半径（单位：米）
				const radius = 500;

				// 添加围栏标记
				this.markers.push({
					id: 1,
					latitude: center.latitude,
					longitude: center.longitude,
					title: '电子围栏中心'
				});

				// 添加电子围栏圆形区域
				this.circles.push({
					id: 1,
					latitude: center.latitude,
					longitude: center.longitude,
					radius: radius,
					fillColor: 'rgba(0, 255, 0, 0.2)',
					strokeColor: 'rgba(0, 255, 0, 1)',
					strokeWidth: 2
				});
			},
			onMarkerTap(e) {
				console.log('Marker tapped:', e.markerId);
			},
			// 计算两点之间的距离（单位：米）
			getDistance(lat1, lon1, lat2, lon2) {
			    const R = 6371e3; // 地球半径，单位：米
			    const φ1 = lat1 * (Math.PI / 180);
			    const φ2 = lat2 * (Math.PI / 180);
			    const Δφ = (lat2 - lat1) * (Math.PI / 180);
			    const Δλ = (lon2 - lon1) * (Math.PI / 180);
			
			    const a =
			        Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
			        Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
			    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			
			    return R * c;
			},
			// 检测用户是否在电子围栏内
			checkFence() {
			    uni.getLocation({
			        type: 'wgs84',
			        success: function (res) {
			            const userLat = res.latitude;
			            const userLon = res.longitude;
			
			            // 电子围栏中心位置
			            const fenceLat = 37.7749;
			            const fenceLon = -122.4194;
			
			            // 电子围栏半径（单位：米）
			            const radius = 500;
			
			            const distance = this.getDistance(userLat, userLon, fenceLat, fenceLon);
			
			            if (distance <= radius) {
			                console.log('用户在电子围栏内');
			            } else {
			                console.log('用户在电子围栏外');
			            }
			        },
			        fail: function (err) {
			            console.error('获取位置失败:', err);
			        }
			    });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
